<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>两列布局</title>
		<link rel="stylesheet" href="css/reset-min.css">
		<style type="text/css">
			body{
				min-width: 600px;
			}
			
			/**
			 * 纯净的两列布局：
			 * 1.left开启float
			 * 2.right开启BFC，设置overflow为hidden
			 */
			
			
			.left{
				width: 200px;
				height: 500px;
				background-color: #BBFFAA;
				/* 设置float，底部right就可以顶上来，但是left底部有right的背景色，这并不是纯净的两列布局 */
				float: left;
			}
			.right{
				height: 500px;
				background-color: #00FFFF;
				/* 开启了BFC，right就全部到右面了，也不会延伸到left里 */
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div class="left">left</div>
		<div class="right">right</div>
	</body>
</html>
